<template>
	<view class="container">
		<!-- 头部标题 -->
		<view class="header">
			<text class="header-title">考试管理</text>
		</view>
		
		<!-- 提示信息 -->
		<view class="notice-bar">
			<text class="notice-icon">ℹ️</text>
			<text class="notice-text">您可以在此管理您发布的所有考试试卷</text>
		</view>
		
		
		<!-- 当没有试卷时显示的提示 -->
		<view class="no-data-section" v-if="examList.length === 0 && !loading">
			<image class="empty-image" src="/static/images/empty-data.png" mode="aspectFit"></image>
			<text class="no-data-text">暂无上传试卷</text>
			<button class="create-btn" @click="navigateTo('/pages/admin/exam-upload')">去发布试卷</button>
		</view>
		
		<!-- 试卷列表 -->
		<scroll-view class="exam-list" 
			scroll-y 
			@scrolltolower="loadMore" 
			@refresherrefresh="onRefresh"
			refresher-enabled
			:refresher-triggered="refreshing"
			v-if="examList.length > 0">
			
			<view class="exam-item" v-for="(item, index) in examList" :key="index">
				<view class="exam-header">
					<view class="exam-title">{{ item.title }}</view>
					<view class="exam-status" :class="{'status-active': item.status === 'active', 'status-paused': item.status === 'paused'}">
						{{ item.status === 'active' ? '进行中' : '已暂停' }}
					</view>
				</view>
				
				<view class="exam-content">
					<view class="exam-info">
						<view class="info-item">
							<text class="info-label">发布时间：</text>
							<text class="info-value">{{ formatDate(item.createTime || item.create_date) }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">试卷类型：</text>
							<text class="info-value">{{ getExamTypeText(item.examType || item.exam_type) }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">参与人数：</text>
							<text class="info-value">{{ item.participantCount || 0 }}人</text>
						</view>
						<view class="info-item">
							<text class="info-label">平均分数：</text>
							<text class="info-value">{{ item.avgScore || 0 }}分</text>
						</view>
					</view>
					
					<view class="exam-actions">
						<button class="action-btn view-btn" @click="viewExamDetails(item._id)">查看详情</button>
						<button class="action-btn edit-btn" @click="editExam(item._id)">编辑</button>
						<button class="action-btn delete-btn" @click="confirmDeleteExam(item)">删除</button>
						<button class="action-btn share-btn" open-type="share" @click="shareExam(item)">分享</button>
					</view>
				</view>
			</view>
			
			<!-- 加载更多 -->
			<view class="loading-more" v-if="hasMore">
				<text>正在加载更多...</text>
			</view>
			<view class="no-more" v-else-if="examList.length > 0">
				<text>没有更多数据了</text>
			</view>
		</scroll-view>
		
		<!-- 加载提示 -->
		<view class="loading-state" v-if="loading && examList.length === 0">
			<text>正在加载数据...</text>
		</view>
	</view>
</template>

<script>
import adminMixin from './mixins/admin-mixin.js';
import { getToken, syncTokenStorage } from '@/utils/tokenManager.js';

export default {
	mixins: [adminMixin],
	data() {
		return {
			userInfo: null,
			showFilter: false,
			examList: [],
			filterParams: {
				title: '',
				startDate: '',
				endDate: '',
				status: ''
			},
			statusOptions: ['全部状态', '进行中', '已暂停'],
			statusIndex: 0,
			loading: false,
			refreshing: false,
			page: 1,
			limit: 10,
			total: 0,
			hasMore: true,
			statistics: {
				totalExams: 0,
				totalParticipants: 0,
				avgScore: 0
			},
			currentShareExam: null,
			examTypeMap: {
				'knowledge': '知识测试',
				'practice': '练习题',
				'competition': '竞赛题',
				'certification': '认证考试',
				'other': '其他'
			}
		}
	},
	computed: {
		formattedStartDate() {
			return this.filterParams.startDate ? this.formatDate(this.filterParams.startDate) : '';
		},
		formattedEndDate() {
			return this.filterParams.endDate ? this.formatDate(this.filterParams.endDate) : '';
		}
	},
	onLoad() {
		console.log('考试管理页面加载');
		// 获取用户信息
		this.getUserInfo();
		// 初始化页面
		this.initPage();
	},
	onPullDownRefresh() {
		this.refreshData();
		this.fetchStatistics();
	},
	// 当页面显示时刷新数据，用于从考试详情页返回后更新统计
	onShow() {
		// 检查是否从考试详情页返回
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];
		
		// 获取上一个页面的路由
		const prevPage = pages.length > 1 ? pages[pages.length - 2] : null;
		const prevRoute = prevPage ? prevPage.route : '';
		
		console.log('当前页面:', currentPage.route);
		console.log('上一个页面:', prevRoute);
		
		// 如果是从试卷详情页返回，则刷新数据
		if (prevRoute && prevRoute.includes('exam-details')) {
			console.log('从考试详情页返回，刷新数据');
			this.refreshData();
			this.fetchStatistics();
		}
	},
	methods: {
		// 实现fetchList方法，确保admin-mixin可以正确调用
		fetchList(append = false) {
			// 直接调用loadExamList方法加载考试列表
			this.loadExamList(append);
		},
		
		// 获取统计数据
		async fetchStatistics() {
			try {
				const examService = uniCloud.importObject('exam-service');
				const res = await examService.getExamStatistics({
					creatorId: this.userInfo ? this.userInfo._id : ''
				});
				
				console.log('获取统计数据成功:', res);
				if (res.code === 0 && res.data) {
						// 只有当确实有考试数据时才更新统计信息
					if (res.data.totalExams > 0) {
						this.statistics.totalExams = res.data.totalExams || 0;
						this.statistics.totalParticipants = res.data.totalParticipants || 0;
						this.statistics.avgScore = res.data.avgScore || 0;
						} else {
							// 无考试数据时，显示为0
							this.statistics.totalExams = 0;
							this.statistics.totalParticipants = 0;
							this.statistics.avgScore = 0;
						}
					}
			} catch (err) {
					console.error('获取统计数据失败:', err);
					// 失败时也设置为0
					this.statistics.totalExams = 0;
					this.statistics.totalParticipants = 0;
					this.statistics.avgScore = 0;
				}
		},

		// 获取考试列表
		loadExamList(append = false) {
			if (this.loading) return;
			
			this.loading = true;
			
			// 获取用户信息 - 增强版用户验证
			let userInfo = this.userInfo || {};
			
			// 验证用户登录状态
			if (!userInfo || !userInfo._id) {
				console.error('用户未登录或未获取到用户信息');
				this.loading = false;
				
				// 提示用户并跳转到登录页
				uni.showModal({
					title: '提示',
					content: '您需要登录后才能管理试卷',
					confirmText: '去登录',
					success: (res) => {
						if (res.confirm) {
							// 保存当前页面路径，便于登录后返回
							uni.setStorageSync('redirect_page', '/pages/admin/exam-management');
							// 跳转到登录页
							uni.navigateTo({
								url: '/pages/login/login'
							});
						} else {
							// 取消则返回上一页
							uni.navigateBack();
						}
					}
				});
				return;
			}
			
			const userId = userInfo._id || '';
			
			console.log('当前用户信息:', userInfo);
			console.log('用户ID:', userId);
			
			if (!userId) {
				this.loading = false;
				this.handleError('未获取到用户信息，请重新登录');
				return;
			}
			
			const statusMap = {
				'0': '',
				'1': 'active',
				'2': 'paused',
				'3': 'deleted'
			};
			
			// 准备请求参数
			const token = uni.getStorageSync('uni_id_token') || '';
			const params = {
				page: this.page,
				limit: this.limit,
				userInfo: userInfo,
				token: token,
				creatorId: userId,  // 确保包含创建者ID
				filterMyExams: true,
				// 保留原有的过滤参数
				title: this.filterParams.title || undefined,
				startDate: this.filterParams.startDate || undefined,
				endDate: this.filterParams.endDate || undefined,
				excludeDeleted: true
			};
			
			// 如果提供了状态过滤
			if (this.statusIndex > 0) {
				params.status = this.statusOptions[this.statusIndex] === '进行中' ? 'active' : 'paused';
			}
			
			console.log('请求参数:', params);
			
			// 详细记录调用云函数信息
			console.log(`准备调用getMyPublishedExams云函数，用户ID: ${userId}, token长度: ${token ? token.length : 0}`);

			(async () => {
				try {
					const adminService = uniCloud.importObject('admin-service');
					const res = await adminService.getMyPublishedExams(params);
					
					this.loading = false;
					this.refreshing = false;
					uni.stopPullDownRefresh();
					
					console.log('获取考试列表成功:', res);
					
					if (res.code === 0) {
						const { data, total } = res;
						
						// 打印返回的第一条数据，查看字段结构
						if (data && data.length > 0) {
							console.log('返回的第一条数据结构:', data[0]);
							console.log('该数据的创建日期字段:', data[0].createTime || data[0].create_date);
							console.log('日期字段类型:', typeof(data[0].createTime || data[0].create_date));
						} else {
							console.log('返回数据为空');
						}
						
						if (append) {
							this.examList = [...this.examList, ...data];
						} else {
							this.examList = data;
						}
						
						this.total = total;
						this.hasMore = this.examList.length < total;
						
						if (data.length > 0) {
							this.page++;
						}
					} else {
						this.handleError(res.message || '获取数据失败');
						console.error('获取考试列表失败，错误码:', res.code, '错误信息:', res.message);
						
						// 如果是权限错误，提示用户重新登录
						if (res.code === 401 || res.code === 403) {
							setTimeout(() => {
								uni.showModal({
									title: '登录已过期',
									content: '请重新登录后再试',
									confirmText: '去登录',
									success: (res) => {
										if (res.confirm) {
											// 清除旧的登录信息
											uni.removeStorageSync('userInfo');
											uni.removeStorageSync('uni_id_token');
											// 跳转到登录页
											uni.navigateTo({
												url: '/pages/login/login'
											});
										}
									}
								});
							}, 1000);
						}
					}
				} catch (err) {
					this.loading = false;
					this.refreshing = false;
					uni.stopPullDownRefresh();
					console.error('调用云对象失败:', err);
					this.handleError('网络错误，请重试');
				}
			})();
		},

		// 获取类型名称
		getTypeName() {
			return 'Exam';
		},

		// 查看考试详情
		viewExamDetails(examId) {
			this.navigateTo(`/packageadmin/admin/exam-details?id=${examId}`);
		},

		// 编辑考试
		editExam(examId) {
			this.navigateTo(`/packageadmin/admin/exam-upload?id=${examId}&mode=edit`);
		},

		// 分享考试
		shareExam(exam) {
			// 保存当前被分享的考试，以便在onShareAppMessage中使用
			this.currentShareExam = exam;
			console.log('准备分享考试:', exam.title);
		},

		// 确认删除考试
		confirmDeleteExam(exam) {
			uni.showModal({
				title: '确认删除',
				content: `确定要删除试卷"${exam.title}"吗？此操作不可恢复。`,
				confirmText: '删除',
				confirmColor: '#ff4d4f',
				success: (res) => {
					if (res.confirm) {
						this.deleteExam(exam);
					}
				}
			});
		},

		// 删除考试
		deleteExam(exam) {
			uni.showLoading({
				title: '删除中...'
			});
			
			// 获取token
			const token = getToken();
			if (!token) {
				uni.hideLoading();
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
				return;
			}
			
			// 获取用户信息
			const userInfo = this.userInfo || {};
			const userId = userInfo._id || userInfo.userId || '';
			
			if (!userId) {
				uni.hideLoading();
				uni.showToast({
					title: '用户信息获取失败，请重新登录',
					icon: 'none'
				});
				return;
			}
			
			console.log('删除试卷:', exam._id, '创建者ID:', userId);
			
			(async () => {
				try {
					const examService = uniCloud.importObject('exam-service');
					// 修改参数传递方式：使用正确的参数名
					const res = await examService.deleteExam({
						examId: exam._id,
						userId: userId,
						token: token
					});
					
					uni.hideLoading();
					console.log('删除试卷返回:', res);
					
					if (res.code === 0) {
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						});
						
						// 从列表中移除该试卷
						const index = this.examList.findIndex(item => item._id === exam._id);
						if (index > -1) {
							this.examList.splice(index, 1);
						}
						
						// 更新统计数据
						this.fetchStatistics();
						
						// 强制刷新列表，确保不会出现已删除的考试
						this.page = 1;
						this.loadExamList(false);
					} else {
						uni.showModal({
							title: '删除失败',
							content: res.message || '未知错误',
							showCancel: false
						});
					}
				} catch (err) {
					uni.hideLoading();
					console.error('删除试卷失败:', err);
					
					uni.showModal({
						title: '删除失败',
						content: '网络错误，请重试',
						showCancel: false
					});
				}
			})();
		},

		// 页面导航
		navigateTo(url) {
			uni.navigateTo({
				url
			});
		},

		// 格式化日期
		formatDate(dateStr) {
			if (!dateStr) return '';
			
			const date = new Date(dateStr);
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			
			return `${year}-${month}-${day}`;
		},

		// 初始化页面
		initPage() {
			// 重置分页参数
			this.page = 1;
			this.examList = [];
			this.total = 0;
			this.hasMore = true;
			
			// 加载考试列表
			this.loadExamList(false);
		},

		// 刷新数据
		refreshData() {
			this.refreshing = true;
			this.page = 1;
			
			// 先刷新考试列表
			this.loadExamList(false);
			// 延迟一点刷新统计数据，确保考试列表先更新
			setTimeout(() => {
				this.fetchStatistics();
			}, 500);
		},

		// 加载更多
		loadMore() {
			if (this.hasMore && !this.loading) {
				this.loadExamList(true);
			}
		},

		// 获取用户信息
		getUserInfo() {
			// 从本地存储获取用户信息
			const userInfoStr = uni.getStorageSync('userInfo');
			if (userInfoStr) {
				try {
					this.userInfo = JSON.parse(userInfoStr);
					console.log('从本地获取用户信息成功:', this.userInfo);
				} catch (e) {
					console.error('解析用户信息失败', e);
					this.getCloudUserInfo();
				}
			} else {
				// 本地没有，从云端获取
				this.getCloudUserInfo();
			}
		},

		// 从云端获取用户信息
		getCloudUserInfo() {
			uniCloud.callFunction({
				name: 'user',
				data: {
					action: 'getUserInfo'
				},
				success: (res) => {
					if (res.result && res.result.code === 0 && res.result.data) {
						this.userInfo = res.result.data;
						console.log('从云端获取用户信息成功:', this.userInfo);
						
						// 重新加载列表
						this.initPage();
					} else {
						console.error('获取用户信息失败:', res.result);
						uni.showToast({
							title: '获取用户信息失败',
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					console.error('调用获取用户信息云函数失败', err);
					uni.showToast({
						title: '网络错误，无法获取用户信息',
						icon: 'none'
					});
				}
			});
		},

		// 处理错误
		handleError(message) {
			uni.showToast({
				title: message,
				icon: 'none'
			});
		},

		onShareAppMessage(options) {
			// options.from 表示分享来源，可能的值：'button'、'menu'
			// options.target 如果 from 是 button，则 target 是触发分享的 button 组件
			// options.webViewUrl 页面中包含 web-view 组件时，返回当前 web-view 的URL
			
			// 获取当前被分享的考试
			const currentExam = this.currentShareExam || {};
			
			return {
				title: currentExam.title || '考试试卷',
				path: `/pages/admin/exam-details?id=${currentExam._id}`,
				imageUrl: currentExam.coverImage || '/static/images/default-cover.png',
				// 分享成功的回调
				success: function(res) {
					// 分享成功
					uni.showToast({
						title: '分享成功',
						icon: 'success'
					});
				}
			};
		},

		// 获取试卷类型显示文本
		getExamTypeText(type) {
			return this.examTypeMap[type] || type;
		},

		// 处理题目数据
		formatQuestionData(question) {
			// 基础数据
			const formattedQuestion = {
				title: question.title || '',
				type: question.type,
				options: question.options || [],
				explanation: question.explanation || '',
				score: Number(question.score) || 5,
				media_files: question.media_files || []
			};
			
			// 根据题目类型处理正确答案
			if (question.type === 'single') {
				// 单选题：使用0-based索引
				formattedQuestion.correct_option = Number(question.correct_option);
				formattedQuestion.correct_options = [];
			} else if (question.type === 'multiple') {
				// 多选题：使用0-based索引数组
				formattedQuestion.correct_options = Array.isArray(question.correct_options) ? 
					question.correct_options.map(Number) : [];
				delete formattedQuestion.correct_option;
			} else if (question.type === 'judge') {
				// 判断题：使用布尔值
				formattedQuestion.correct_option = Boolean(question.correct_option);
				formattedQuestion.correct_options = [];
			}
			
			return formattedQuestion;
		},
		
		// 提交考试
		async submitExam() {
			try {
				// 验证基本信息
				if (!this.examForm.title) {
					uni.showToast({
						title: '请输入考试标题',
						icon: 'none'
					});
					return;
				}
				
				// 验证题目
				if (!this.examForm.questions || this.examForm.questions.length === 0) {
					uni.showToast({
						title: '请添加考试题目',
						icon: 'none'
					});
					return;
				}
				
				// 格式化所有题目数据
				const formattedQuestions = this.examForm.questions.map(q => this.formatQuestionData(q));
				
				// 准备提交的数据
				const examData = {
					...this.examForm,
					questions: formattedQuestions,
					is_published: true,
					userId: this.userId
				};
				
				// 提交数据
				const result = await this.$callFunction('uploadExamPaper', examData);
				
				if (result.success) {
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					});
					
					// 返回列表
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				} else {
					throw new Error(result.message || '保存失败');
				}
			} catch (error) {
				console.error('提交考试失败:', error);
				uni.showToast({
					title: error.message || '保存失败',
					icon: 'none'
				});
			}
		}
	}
}
</script>

<style>
	@import "../admin/app.css";
	
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
	}
	
	.header-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.notice-bar {
		display: flex;
		align-items: center;
		background-color: #e6f7ff;
		padding: 16rpx 24rpx;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}
	
	.notice-icon {
		margin-right: 12rpx;
	}
	
	.notice-text {
		font-size: 26rpx;
		color: #1890ff;
	}
	
	.filter-section {
		background-color: #fff;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
	}
	
	.filter-header {
		display: flex;
		justify-content: space-between;
		padding: 24rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.filter-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}
	
	.filter-toggle {
		font-size: 26rpx;
		color: #1BAE76;
	}
	
	.filter-form {
		padding: 20rpx;
	}
	
	.filter-item {
		margin-bottom: 20rpx;
	}
	
	.filter-label {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 12rpx;
	}
	
	.filter-input {
		width: 100%;
		height: 70rpx;
		background-color: #f9f9f9;
		border: 1rpx solid #ddd;
		border-radius: 6rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}
	
	.date-range {
		display: flex;
		align-items: center;
	}
	
	.date-picker {
		flex: 1;
		height: 70rpx;
		background-color: #f9f9f9;
		border: 1rpx solid #ddd;
		border-radius: 6rpx;
	}
	
	.picker-value {
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.date-separator {
		margin: 0 20rpx;
		color: #999;
	}
	
	.filter-picker {
		width: 100%;
		height: 70rpx;
		background-color: #f9f9f9;
		border: 1rpx solid #ddd;
		border-radius: 6rpx;
	}
	
	.picker-arrow {
		color: #999;
	}
	
	.filter-buttons {
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
	}
	
	.reset-btn {
		margin-right: 20rpx;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #666;
		background-color: #f2f2f2;
		border: none;
	}
	
	.apply-btn {
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #fff;
		background-color: #1BAE76;
		border: none;
	}
	
	.statistics-section {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 30rpx 20rpx;
		margin-bottom: 20rpx;
	}
	
	.stat-item {
		flex: 1;
		text-align: center;
		border-right: 1rpx solid #eee;
	}
	
	.stat-item:last-child {
		border-right: none;
	}
	
	.stat-value {
		display: block;
		font-size: 36rpx;
		font-weight: bold;
		color: #1BAE76;
		margin-bottom: 10rpx;
	}
	
	.stat-label {
		font-size: 24rpx;
		color: #999;
	}
	
	.empty-state {
		display: none;
	}
	
	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 30rpx;
		display: block;
	}
	
	.create-btn {
		width: 300rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #1BAE76;
		color: #fff;
		font-size: 28rpx;
		border-radius: 40rpx;
		margin: 0 auto;
	}
	
	.exam-list {
		height: calc(100vh - 400rpx);
	}
	
	.exam-item {
		background-color: #fff;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
	}
	
	.exam-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.exam-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		flex: 1;
	}
	
	.exam-status {
		padding: 6rpx 16rpx;
		font-size: 24rpx;
		border-radius: 20rpx;
	}
	
	.status-active {
		background-color: #e6f7ff;
		color: #1890ff;
	}
	
	.status-paused {
		background-color: #fff1f0;
		color: #ff4d4f;
	}
	
	.exam-content {
		padding: 20rpx;
	}
	
	.exam-info {
		margin-bottom: 20rpx;
	}
	
	.info-item {
		display: flex;
		margin-bottom: 10rpx;
	}
	
	.info-label {
		width: 150rpx;
		font-size: 26rpx;
		color: #666;
	}
	
	.info-value {
		flex: 1;
		font-size: 26rpx;
		color: #333;
	}
	
	.exam-actions {
		display: flex;
		justify-content: space-between;
	}
	
	.action-btn {
		flex: 1;
		margin: 0 10rpx;
		padding: 0;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 26rpx;
		border-radius: 6rpx;
	}
	
	.action-btn:first-child {
		margin-left: 0;
	}
	
	.action-btn:last-child {
		margin-right: 0;
	}
	
	.view-btn {
		background-color: #e6f7ff;
		color: #1890ff;
		border: 1rpx solid #91d5ff;
	}
	
	.edit-btn {
		background-color: #fff7e6;
		color: #fa8c16;
		border: 1rpx solid #ffd591;
	}
	
	.delete-btn {
		background-color: #fff1f0;
		color: #ff4d4f;
		border: 1rpx solid #ffa39e;
	}
	
	.share-btn {
		background-color: #f9f0ff;
		color: #722ed1;
		border: 1rpx solid #d3adf7;
	}
	
	.loading-more, .no-more {
		text-align: center;
		padding: 20rpx 0;
		font-size: 26rpx;
		color: #999;
	}
	
	.loading-state {
		text-align: center;
		padding: 100rpx 0;
		font-size: 28rpx;
		color: #999;
	}
	
	.no-data-section {
		padding: 100rpx 0;
		text-align: center;
	}
	
	.no-data-text {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 30rpx;
		display: block;
	}
</style> 